<!DOCTYPE html>
<html lang="cn">
<head>
    <title>{$data.title}</title>
    <meta name="description" content="{$data.share_introduction}">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <script src="{$data.ossHost}/static/active_fortune_year/js/adaptation.js?v=108"></script>
    <script src="{$data.ossHost}/static/active_fortune_year/js/resLoader.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <link rel="stylesheet" href="{$data.ossHost}/static/active_fortune_year/css/animate.min.css">
    <link rel="stylesheet" href="/static/active_fortune_year/css/style.css?v=108">
    <style type="text/css">
        /*下滑gif*/
        .next-s {
            background: url("{$data.ossHost}/static/active_fortune_year/images/next.gif") no-repeat center center;
            background-size: 100%;
            width: 1.38rem;
            height: 1.48rem;
            position: absolute;
            bottom: 0.50rem;
            left: calc(50% - 0.69rem);
            z-index: 120;
        }
    </style>
</head>
<body>
<div class="music-box">
    <img class="music-logo" src="{$data.ossHost}/static/active_fortune_year/images/music.png" alt="">
    <audio id="bg-music" src="{$data.ossHost}/static/active_fortune_year/music/background1.mp3" loop="loop"></audio>
</div>
<div class="load-background">
    <div class="load-box">
        <img src="{$data.ossHost}/static/active_fortune_year/images/loading.gif" class="load-img" alt="">
        <div class="progress-box">
        </div>
    </div>
</div>
<div class="content-box">
    <div class="con-background p1">
        <div class="cloud" style="display: none"></div>
        <div class="txt" style="display: none"></div>
        <div class="person" style="display: none"></div>
        <a class="btn un next" href="javascript:;" data-step="2" style="display: none"></a>
    </div>
    <div class="con-background p2">
        <div class="cloud" style="display: none"></div>
        <div class="person"></div>
        <div class="xingzuo-select" style="display: none">
            <div class="xz-item-box">
                <div class="row">
                    <img class="sign_img" id="sign_10" data-index="10"/>
                    <img class="sign_img" id="sign_7" data-index="7"/>
                    <img class="sign_img" id="sign_4" data-index="4"/>
                    <img class="sign_img" id="sign_1" data-index="1"/>
                </div>
                <div class="row">
                    <img class="sign_img" id="sign_11" data-index="11"/>
                    <img class="sign_img" id="sign_8" data-index="8"/>
                    <img class="sign_img" id="sign_5" data-index="5"/>
                    <img class="sign_img" id="sign_2" data-index="2"/>
                </div>
                <div class="row">
                    <img class="sign_img" id="sign_12" data-index="12"/>
                    <img class="sign_img" id="sign_9" data-index="9"/>
                    <img class="sign_img" id="sign_6" data-index="6"/>
                    <img class="sign_img" id="sign_3" data-index="3"/>
                </div>
            </div>
            <img id="sign_select"/>
        </div>
        <a href="javascript:;" data-step="3" class="next un next-s" style="display: none"></a>
    </div>
    <div class="con-background p3">
        <img class="cloud">
        <div class="person" style="display: none"></div>
        <img class="txt">
        <div class="btn"></div>
    </div>
    <div class="con-background p5">
        <img class="txt">
        <div class="person"></div>
        <a href="javascript:;" data-step="5" class="next un next-s"></a>
    </div>
    <div class="con-background p6">
        <img class="txt">
        <div class="star"></div>
        <div class="music"></div>
        <div class="person"></div>
        <a href="javascript:;" data-step="6" class="next un next-s" style="display: none"></a>
    </div>
    <div class="con-background p7">
        <div class="moon"></div>
        <img class="txt">
        <div class="star"></div>
        <div class="person"></div>
        <a href="javascript:;" data-step="7" class="next un next-s" style="display: none"></a>
    </div>
    <div class="con-background p8">
        <img class="txt">
        <div class="person"></div>
        <a href="javascript:;" data-step="8" class="next un next-s" style="display: none"></a>
    </div>
    <div class="con-background p9">
        <div class="moon"></div>
        <div class="con" id="p9_con" style="display: none;">
            <div class="row">
                <img id="txt_0"/>
            </div>
            <div class="row">
                <img id="txt_1_0"/>
            </div>
            <div class="row">
                <div class="day_num color_1" id="value_1"></div>
                <img class="img_unit"/>
                <img id="txt_1_1"/>
            </div>
            <div class="row">
                <div class="day_num color_2" id="value_2"></div>
                <img class="img_unit"/>
                <img id="txt_2"/>
            </div>
            <div class="row">
                <div class="day_num color_3" id="value_3"></div>
                <img class="img_unit"/>
                <img id="txt_3"/>
            </div>
            <img id="p9_btn"/>
        </div>
        <div class="person"></div>
    </div>
</div>
<div class="bg-box">
    <img id="result_img">
    <div class="btbox">
        <img id="bottom_bg" alt="">
        <div class="top">
            <img id="save_pic_btn" alt="">
            <img id="share_btn" alt="">
        </div>
        <img id="year_btn">
    </div>
    <div class="cloud_bottom"></div>
    <div class="cover-box">
        <!--分享图片-->
        <div class="msg" style="display: none" alt=""></div>
        <!--加载中-->
        <img id="loading" style="display: none" alt="">
    </div>
    <!--保存图片-->
    <div class="pop_con" style="display: none">
        <img id="save_img" alt="">
    </div>
</div>
</body>
<script src="{$data.ossHost}/static/active_fortune_year/js/jquery-v2.1.1.min.js"></script>
<script src="{$data.ossHost}/static/active_fortune_year/js/EventUtil.js"></script>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?97bd25fb643e2fbf349c2c61e247fc7a";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript">
    var localhosts = "{$data.host}";
    var osshosts = "{$data.ossHost}";
    var openid = "{$data.openid}";
    var type = "{$data.type}";
    var sign = "{$data.sign}";
    var isInApp = "{$data.isInApp}";
    var app_type = '{$data.app_type}';
    var version = '{$version}'
    var share_title = '{$data.share_title}';
    var data_wechat = JSON.parse('{:json_encode($data)}');
</script>
{if 1==$data.isInApp}
<script src="/static/vip/js/common_func.js?v=1"></script>
{/if}
{if 2== $data.type}
<script type="text/javascript">
    wx.config({
        debug: false,
        appId: '{$data.signPackage.appId}',
        timestamp: '{$data.signPackage.timestamp}',
        nonceStr: '{$data.signPackage.nonceStr}',
        signature: '{$data.signPackage.signature}',
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
    });
    wx.ready(function () {
        wx.onMenuShareAppMessage({
            title: share_title,
            desc: '{$data.share_introduction}',
            link: '{$data.signPackage.url}',
            imgUrl: '{$data.ossHost}/static/active_fortune_year/images/share.jpg',
            type: 'link',
            dataUrl: '',
            success: function () {
                console.log('成功');
                $('.cover-box').hide();
            },
            cancel: function () {
                console.log('shib');
                $('.cover-box').hide();
            }
        });
        wx.onMenuShareTimeline({
            title: share_title,
            link: '{$data.signPackage.url}',
            imgUrl: '{$data.ossHost}/static/active_fortune_year/images/share.jpg',
            success: function () {
                console.log('成功');
                $('.cover-box').hide();
            },
            cancel: function () {
                console.log('shib');
                $('.cover-box').hide();
            }
        });
    });
</script>
{/if}
<script src="/static/active_fortune_year/js/js.js?v=108"></script>
<script src="https://static.jmlk.co/scripts/dist/jmlink.min.js"></script>
{include file="../apps/web/view/public/sensors.html" /}
</html>
